<template>
  <div class="soundMeta" v-if="$attrs.info.sound">
      <ul class="tab-list">
          <router-link active-class="active" tag="li" to="./soundIntro">简介</router-link>
          <router-link active-class="active" tag="li" to="./soundComments">评论 ({{$attrs.info.sound.comments_count}}) </router-link>
          <router-link active-class="active" tag="li" to="./soundPic">图片</router-link>
      </ul>
      <div class="tab-content">
          <router-view v-bind="$attrs"></router-view>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus" scoped>
.soundMeta
    min-height calc(100% - 3.25rem - 0.68rem)
    position relative
    width 100%
    .tab-list
        display flex
        position relative
        height .4rem
        justify-content space-between
        align-items center
        font-size .12rem
        margin .06rem 0
        li
            transition color .2s ease,border-color .2 ease 
            flex 1 0 auto
            display flex
            justify-content center
            align-items center
            z-index 0
            height 100%
            position relative
            &.active
                color #c14a3f
                border-color #c14a3f
                &:after
                    color #c14a3f
                    border-color #c14a3f
            &:after
                content ""
                display block
                position absolute
                bottom 0
                height 100%
                width .74rem
                border-bottom .02rem solid transparent
                z-index 1
                transition color .2s ease,border-color .2s ease
            &:before
                content ""
                display block
                position absolute
                top .1rem
                left 0
                border-left 1px solid #e0e0e0
                height .18rem
            &:nth-child(1):before
                display none
    .tab-content
        padding .12rem 0
        position relative
        min-height calc(100% - 1.6rem)
</style>